@import './colors';

/** initial setup **/
@nanoClass: ~'nano';
@paneClass: ~'nano-pane';
@sliderClass: ~'nano-slider';
@contentClass: ~'nano-content';

.@{nanoClass} {
  position: relative;
  width: 100%;
/*  height: 100%;*/
  overflow: hidden;
  > .@{contentClass} {
  position: absolute;
  overflow: scroll;
  overflow-x: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
    &:focus {
      outline: thin dotted;
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .@{paneClass} {
    background: rgba(0,0,0,0);
    position:absolute;
    width:10px;
    left:0;
    top:0;
    bottom:0;
    /* Target only IE7 and IE8 with this hack */
    visibility:hidden\9;
    opacity: .01;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    > .@{sliderClass} {
      background: #444;
      background: @menu-border-color;
      position: relative;
      margin : 0 1px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
  }
}

.@{nanoClass}:hover > .@{paneClass},
.@{paneClass}.active,
.@{paneClass}.flashed {
  /* Target only IE7 and IE8 with this hack */
  visibility: visible\9;
  opacity: 0.99;
}

.has-scrollbar > .@{contentClass}::-webkit-scrollbar {
  display: block;
}

.nano-content {
  display: flex;
  flex-direction: column;
}
